<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<image :src="imgHost+'/upload/rootswiper/'+item.imgurl"
				mode="widthFix"></image>
			</swiper-item>
		</swiper>
		
		<view>
			<!--条件兼容，使某一段代码在指定端能运行-->
			<!-- #ifdef H5-->
				<h1>我只能在H5端能看到</h1>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN-->
				<h1>我只能在微信小程序端能看到</h1>
			<!-- #endif -->
			
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
			<view class="redfont">条件兼容样式测试</view>
		</view>
	</view>
</template>

<script>
	import {requet,setCache,getCache} from "../../utils/changetopromise.js";
	import config from "../../utils/config.js";
	export default {
		data() {
			return {
				title: 'Hello',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperList:[],
				imgHost:config.imgHost
			}
		},
		async onLoad() {
			// #ifdef H5
			console.log("我只能被输出到H5控制台");
			// #endif
			// #ifdef MP-WEIXIN
			console.log("我只能被输出到微信小程序控制台");
			// #endif
			await setCache("token","adbadafasdf12312h31i231i2g");
			let params={
				url:"swiper/listswiper",
				data:{"pageNo":1,"pageSize":20}
			}
			let {data}=await requet(params);
			this.swiperList=data.rows;
		},
		async onReachBottom() {
			console.log("上拉加载");
			console.log(await getCache("token"))
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */
	.redfont{
		color: red;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	.redfont{
		color: blue;
	}
	/* #endif */
	.content{
		swiper{
			width: 100%;
			height:calc(100vw * 400 / 780);
			swiper-item{
				image{
					width: 100%;
				}
			}
		}
	}
</style>
